<template>
    <div class="f10 center rel c-arc progress of">
        <span class="bar absfull c-arc" :style="style"></span>
        <span class="rel text">{{current}}/{{all}}</span>
    </div>
</template>

<script>
    export default {
        name: "AppProgress",
        props: {
            all: Number,
            current: Number
        },
        computed: {
            style() {
                const {current, all} = this;
                return {
                    width: current * 100 / all + '%'
                };
            }
        }
    };
</script>

<style scoped>
    .progress {
        background-color: #f1f1f1;
        color: #999999;
        line-height: 1.5;
    }

    .bar {
        display: block;
        background-color: wheat;
    }

    .text {
        z-index: 1;
    }
</style>